.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

/* 二维码区域 */
.barcodeSection {
  background: white;
  margin: 20px;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.barcodeContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.barcode {
  width: 200px;
  height: 80px;
  background: linear-gradient(90deg, 
    #000 0%, #000 8%, #fff 8%, #fff 12%, 
    #000 12%, #000 20%, #fff 20%, #fff 24%,
    #000 24%, #000 32%, #fff 32%, #fff 36%,
    #000 36%, #000 44%, #fff 44%, #fff 48%,
    #000 48%, #000 56%, #fff 56%, #fff 60%,
    #000 60%, #000 68%, #fff 68%, #fff 72%,
    #000 72%, #000 80%, #fff 80%, #fff 84%,
    #000 84%, #000 92%, #fff 92%, #fff 96%,
    #000 96%, #000 100%
  );
  border: 1px solid #ddd;
  border-radius: 4px;
}

.barcodeNumber {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: 2px;
}

.barcodeInstruction {
  font-size: 14px;
  color: #666;
}

/* 缴费信息 */
.paymentInfo {
  background: white;
  margin: 0 20px 20px 20px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sectionTitle {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.infoList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.infoItem {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
}

.value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

/* 项目明细 */
.itemDetails {
  background: white;
  margin: 0 20px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.medicineSection {
  margin-bottom: 20px;
}

.examinationSection {
  margin-bottom: 20px;
}

.pickupNotice {
  background: #e6f7ff;
  color: #1890ff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid #bae7ff;
}

.examinationNotice {
  background: #fff7e6;
  color: #d46b08;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid #ffd591;
}

/* 标签页 */
.tabContainer {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.tab {
  background: #f5f5f5;
  color: #666;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.tab.activeTab {
  background: #1890ff;
  color: white;
}

/* 检查项目的标签样式 */
.examinationSection .tab {
  background: #fff7e6;
  color: #d46b08;
  border: 1px solid #ffd591;
}

.examinationSection .tab.activeTab {
  background: #d46b08;
  color: white;
}

.prescriptionNo {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 药品列表 */
.medicineList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.medicineItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.medicineItem:last-child {
  border-bottom: none;
}

.medicineInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.medicineName {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.medicineQuantity {
  font-size: 12px;
  color: #666;
}

/* 检查项目不显示数量 */
.examinationSection .medicineQuantity {
  display: none;
}

.medicinePrice {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* 总计 */
.totalAmount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: 2px solid #f0f0f0;
  margin-top: 10px;
}

.totalLabel {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.totalValue {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .barcodeSection,
  .paymentInfo,
  .itemDetails {
    margin: 15px;
    padding: 15px;
  }
  
  .barcode {
    width: 160px;
    height: 60px;
  }
  
  .barcodeNumber {
    font-size: 16px;
  }
  
  .infoItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .label {
    min-width: auto;
  }
  
  .tabContainer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}